<template>
  <div class="common-layout">
    <el-affix :z-index="9999">
      <el-container>
        <el-header style="background: #fff;">
          <div id="logo">
            <img :src="avatar" style="width: 100%;height: 100%" alt="">
          </div>
          <div id="header-title">
            {{ title }}
          </div>
          <el-dialog v-model="dialogTableVisible" title="请修改您的密码">
            <el-form-item>
              <el-input placeholder="请输入用户名" v-model="formLabelAlign.username" type="text" class="username" prefix-icon="el-icon-login-user"  disabled ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请输入原密码" v-model="formLabelAlign.oldpass" type="text" class="password" prefix-icon="el-icon-login-password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请输入新密码" v-model="formLabelAlign.newpass" type="text" class="password" prefix-icon="el-icon-login-password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请输入确认新密码" v-model="formLabelAlign.confirmpass" type="text" class="password" prefix-icon="el-icon-login-password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="upPass">修改密码</el-button>
            </el-form-item>
          </el-dialog>
          <el-popover
              trigger="click"
          >
            <p
                class="tuichu"
                :style="{'text-align':'center','font-size': '18px','color':'#2AB28B','cursor':'pointer'}"
                @click="dialogTableVisible = true"
            >修改密码</p>
            <p
                class="tuichu"
                :style="{'text-align':'center','font-size': '18px','color':'#2AB28B','cursor':'pointer'}"
                @click="goSignOut"
            >退出登录</p>

            <template #reference>
              <div id="users">
                <img src="../../assets/img/header_user.png" alt="" class="icons">
                <span>您好！{{ userName }}({{ MemberId }})</span>
                <el-icon :size="18" class="icon">
                  <ArrowDown></ArrowDown>
                </el-icon>
              </div>
            </template>
          </el-popover>
        </el-header>
      </el-container>
    </el-affix>

  </div>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
</script>
<script>
import http, {baseUrl} from "../../utils/http";
import * as api from "../../api/loginHttp";
import {resetPwd} from "../../api/loginHttp";
import {useRoute, useRouter} from "vue-router"
export default {
  name: "Header",
  data() {
    return {
      dialogTableVisible: false,
      title: '',
      userName: '',
      MemberId:'',
      formLabelAlign: {
        username: '',
        oldpass: '',
        newpass: '',
        confirmpass: '',
      },
      avatar:'',

      username:'',
      guardian:'',
      birthStatus:'',
      imgUrl:'',
    }
  },

  created() {
    this.default();
  },
  methods: {
    async default() {
      this.username = this.$route.params.username
      this.guardian = this.$route.params.guardian
      this.birthStatus = this.$route.params.birth
      this.imgUrl = "http://"+baseUrl+'/';
      if(this.username && this.guardian && this.birthStatus) {
        http.get('api/archives/getArUsers?username='+this.username+'&guardian='+ this.guardian+'&birthStatus='+ this.birthStatus).then((res)=>{
          if(res.data.code !== 0) {
            this.title = res.data.data.username;
            this.userName = res.data.data.username;
            this.MemberId = res.data.data.id;
            this.formLabelAlign.username = res.data.data.username;
            this.avatar = this.imgUrl + res.data.data.avatar;
          }
        })
      } else {
        this.title = window.localStorage.getItem("Title");
        this.userName = window.localStorage.getItem("Username");
        this.MemberId = window.localStorage.getItem("MemberId");
        this.formLabelAlign.username = window.localStorage.getItem("Username");
        this.avatar = window.localStorage.getItem("Avatar")
      }
    },
    async upPass(){
      let params = {
        'username': this.formLabelAlign.username,
        'oldpass': this.formLabelAlign.oldpass,
        'newpass': this.formLabelAlign.newpass,
        'confirmpass': this.formLabelAlign.confirmpass,
      }
      const data = await api.resetPwd(params);
      if(data.data.code == 1) {
        http.get('api/user/logout?token='+window.localStorage.getItem('token')).then((res)=>{
          if(res.data.code === 1){
            window.localStorage.setItem("Token", '');
            window.localStorage.setItem("Title", '');
            window.localStorage.setItem("Username", '');
            window.localStorage.setItem("MemberId", '');
            this.$message({
              type: 'success',
              message: data.data.msg
            });
            this.$router.push({'path':'/Login/'})
          }
        })
      }
    },
    goSignOut(){
      this.$confirm('确定要退出吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        http.get('api/user/logout?token='+window.localStorage.getItem('token'))
        window.localStorage.setItem("Token", '');
        window.localStorage.setItem("Title", '');
        window.localStorage.setItem("Username", '');
        window.localStorage.setItem("MemberId", '');
        window.localStorage.setItem("Avatar", '');
        this.$router.push({'path':'/Login/'})
      }).catch(() => {

      });
    }
  },

}
</script>

<style scoped>
/deep/ .el-input--prefix .el-input__inner {
  padding-left: 50px;
}
/deep/ .is-light {
  left: -81px;
  top: -31px;
}
/deep/ .el-header {
  height:100px;
}

/deep/ .el-button {
  border-radius: 8px;
  background: #2AB28B;
  width: 100%;
  color: #FFFFFF;
  height: 70px;
}
/deep/ .el-button:hover {
  border-radius: 8px;
  background: #3DAF76;
  width: 100%;
  color: #FFFFFF;
  height: 70px;
}
/deep/ .el-button:focus {
  border-radius: 8px;
  background: #3DAF76;
  width: 100%;
  color: #FFFFFF;
  height: 70px;
}
/deep/ .el-dialog{
  border-radius: 20px;
}
</style>

<style>
@import '../../assets/css/common.css';
.el-header{
  color: var(--el-text-color-primary);
  line-height: 100px;
  box-shadow: 0 0 20px #000;
  position: relative;
}
#logo {
  width: 100px;
  height: 90%;
  float: left;
  margin-left: 3%;
  margin-top: 5px;
}
#header-title {
  width: 30%;
  height: 100%;
  position:relative; transform:translate(10%,-0%);
  font-size: 26px;
  color:#333333;
  font-weight: bold;
  float: left;
  padding-left: 25%;
}
#users {
  cursor:pointer;
  float: right;
  width: 22%;
  height: 100%;
  position:relative; transform:translate(10%,-0%);
  margin-right: 5%;
}
.icon{
  top:4px;
  left: 10px
}
.icons {
  margin: 0 10px 0 18px;
  position: relative;
  top: 12px;
  width: 43.73px;
  height: 43.73px;
  right: -6px;
}
.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 200px;

}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
